<template>
    <div class="form">
        <h3>添加水电费</h3>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="宿舍" prop="dormId">
                <el-select v-model="form.buildId" placeholder="请选择楼宇" @change="changeBuild">
                    <el-option v-for="item in buildings" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="form.dormId" placeholder="请选择宿舍" @change="changeDorm">
                    <el-option v-for="item in dorms" :key="item.id" :label="item.dormName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间" prop="time">
                <el-date-picker style="width: 16vw;" v-model="form.time" type="month" placeholder="请选择时间" />
            </el-form-item>
            <el-form-item label="用水量" prop="waterConSum">
                <el-input-number v-model="form.waterConSum" :precision="2" :step="0.1" :min="0" :max="1000" />
            </el-form-item>
            <el-form-item label="水费" prop="waterCharge">
                <el-input-number v-model="form.waterCharge" :precision="2" :step="0.1" :min="0" :max="1000" />
            </el-form-item>
            <el-form-item label="用电量" prop="electricityConSum">
                <el-input-number v-model="form.electricityConSum" :precision="2" :step="0.1" :min="0" :max="1000" />
            </el-form-item>
            <el-form-item label="电费" prop="electricityCharge">
                <el-input-number v-model="form.electricityCharge" :precision="2" :step="0.1" :min="0" :max="1000" />
            </el-form-item>
        </el-form>
        <el-form class="btnGroup">
            <el-button size="large" :loading="loading" type="primary" @click="submitForm">确 定</el-button>
            <el-button size="large" @click="cancel">取 消</el-button>
        </el-form>
    </div>
</template>

<script setup name="plumberAddFareInfo">
import { reactive } from 'vue';
import { ElNotification } from 'element-plus'
import { getBuildingApi, getDormApi, addWaterElectricityApi } from '@/api/plumber'
const loading = ref(false);

const buildings = ref([])
const dorms = ref([])

const data = reactive({
    form: {
        buildId: '',
        dormId: '',
        time: '',
        waterConSum: '0.1',
        waterCharge: '0.1',
        electricityConSum: '0.1',
        electricityCharge: '0.1'
    },
    rules: {
        buildId: [{ required: true, message: "楼宇不能为空", trigger: "blur" }],
        dormId: [{ required: true, message: "宿舍不能为空", trigger: "blur" }],
        time: [{ required: true, message: "时间不能为空", trigger: "blur" }],
        waterConSum: [{ required: true, message: "用水量不能为空", trigger: "blur" }],
        waterCharge: [{ required: true, message: "水费不能为空", trigger: "blur" }],
        electricityConSum: [{ required: true, message: "用电量不能为空", trigger: "blur" }],
        electricityCharge: [{ required: true, message: "电费不能为空", trigger: "blur" }]
    },
});

const { form, rules } = toRefs(data);

const changeBuild = (val) => {
    form.value.buildId = val
    form.value.dormId = ''
    dorms.value = []
    getDorms(val)
}

const changeDorm = (val) => {
    form.value.dormId = val
}

const getBuildings = () => {
    getBuildingApi().then(res => {
        if (res.code == 200) {
            buildings.value = res.data
        }
    })
}
getBuildings()

const getDorms = (val) => {
    getDormApi(val).then(res => {
        if (res.code == 200) {
            dorms.value = res.data
        }
    })
}

const { proxy } = getCurrentInstance();
/** 提交按钮 */
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            console.log(form.value);
            loading.value = true
            addWaterElectricityApi(form.value).then(res => {
                if (res.code == 200) {
                    ElNotification({
                        title: '提示',
                        message: '添加成功',
                        type: 'success'
                    })
                    loading.value = false
                    proxy.resetForm("formRef")
                    form.value.buildId = ''
                    form.value.dormId = ''
                }
            })
                .catch(() => {
                    loading.value = false
                })
        }
    });
}

const cancel = () => {
    proxy.resetForm("formRef")
    form.value.buildId = ''
    loading.value = false
}

</script>
<style lang='scss' scoped>
.form {
    margin-top: 4vh;
    width: 40vw;

    .input {
        width: 16vw;
    }

    .picker {
        width: 8vw;
    }

    .btnGroup {
        display: flex;
        justify-content: space-evenly;
    }
}

.form>h3 {
    text-align: center;
}
</style>

